<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
            p {
                text-indent: 22px;
            }
            span.mui-icon {
                font-size: 14px;
                color: #007aff;
                margin-left: -15px;
                padding-right: 10px;
            }

            .mui-off-canvas-right{
                color: #fff;
            }

            .title{
                margin: 35px 15px 10px;
              }
              .title+.content{
                margin: 10px 15px 35px;
                color: #bbb;
                text-indent: 1em;
                font-size: 14px;
                line-height: 24px;
              }
        </style>
    </head>

    <body>
        <!--侧滑菜单容器-->
        <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
            <!--菜单部分-->
            <aside id="offCanvasSide" class="mui-off-canvas-left">
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="title">侧滑导航</div>
                        <div class="content">
                            这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
                            1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
                            3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
                            </span>。
                            <p style="margin: 10px 15px;">
                                <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                            </p>

                        </div>
                        <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 1
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 2
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 3
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 4
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 5
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                Item 6
                            </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </aside>
            <aside id="offCanvasSide" class="mui-off-canvas-left">
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="title">侧滑导航</div>
                        <div class="content">
                            这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
                            1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
                            3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
                            </span>。
                            <p style="margin: 10px 15px;">
                                <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                            </p>

                        </div>
                        <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 1
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 2
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 3
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 4
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 5
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 6
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="mui-inner-wrap">
                <header class="mui-bar mui-bar-nav">
                    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
                    <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
                    <h1 class="mui-title">左滑导航</h1>
                </header>
                <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-content-padded">
                            <p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中，
                                优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
                                当前页面为主界面，你可以在主界面放置任何内容；
                            打开侧滑菜单有多种方式：
                            1、在当前页面向左拖动；
                            2、点击页面右上角的<span class="mui-icon mui-icon-bars"></span> 图标；
                            3、通过JS API触发（例如点击如下蓝色按钮体验）；
                            <span class="android-only">4、Android手机按menu键；</span>
                            </p>
                            <p style="padding: 5px 20px;margin-bottom: 5px;">
                                <button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px 100px;">
                                    显示侧滑菜单
                                </button>
                            </p>
                            <p>侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>

                        </div>

                        <form class="mui-input-group" style="margin-bottom: 15px;">
                            <div class="mui-input-row mui-radio">
                                <label>主界面移动、菜单不动</label>
                                <input name="style" type="radio" checked="" value="main-move">
                            </div>
                            <div class="mui-input-row mui-radio">
                                <label>主界面不动、菜单移动</label>
                                <input name="style" type="radio" value="menu-move">
                            </div>
                            <div class="mui-input-row mui-radio mui-hidden" id="move-togger">
                                <label>整体移动</label>
                                <input name="style" type="radio" value="all-move">
                            </div>
                        </form>   

                    </div>
                </div>
                <!-- off-canvas backdrop -->
                <div class="mui-off-canvas-backdrop"></div>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script src="js/app.js"></script>
        <script>
            mui.init({
                swipeBack: false,
            });
            //侧滑容器父节点
            var offCanvasWrapper = mui('#offCanvasWrapper');
            //主界面容器
            var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
            //菜单容器
            var offCanvasSide = document.getElementById("offCanvasSide");

            //Android暂不支持整体移动动画
            if(!mui.os.android){
                document.getElementById("move-togger").classList.remove('mui-hidden');
                var spans = document.querySelectorAll('.android-only');
                for (var i=0,len=spans.length;i<len;i++) {
                    spans[i].style.display = "none";
                }
            }

            //移动效果是否为整体移动
            var moveTogether = false;
            //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
            var classList = offCanvasWrapper[0].classList;
            //变换侧滑动画移动效果；
            mui('.mui-input-group').on('change','input',function () {
                if(this.checked){
                    switch (this.value){
                        case 'main-move':
                            classList.remove('mui-slide-in');
                            if(moveTogether){
                                //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
                                offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
                                moveTogether = false;
                            }
                            break;
                        case 'menu-move':
                            classList.add('mui-slide-in');
                            break;
                        case 'all-move':
                            if(classList.contains('mui-slide-in')){
                                classList.remove('mui-slide-in');
                            }
                            moveTogether = true;
                            //整体滑动时，侧滑菜单在inner-wrap内
                            offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
                            break;
                    }
                    offCanvasWrapper.offCanvas().refresh();
                }
            });


            document.getElementById('offCanvasShow').addEventListener('tap', function() {
                offCanvasWrapper.offCanvas('show');
            });
            document.getElementById('offCanvasHide').addEventListener('tap', function() {
                offCanvasWrapper.offCanvas('close');
            });
            //主界面和侧滑菜单界面均支持区域滚动；
            mui('#offCanvasSideScroll').scroll();
            mui('#offCanvasContentScroll').scroll();

             //实现ios平台的侧滑关闭页面；
            if (mui.os.plus && mui.os.ios) {
                offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
                    plus.webview.currentWebview().setStyle({
                        'popGesture': 'none'
                    });
                });
                offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
                    plus.webview.currentWebview().setStyle({
                        'popGesture': 'close'
                    });
                });
            }
        </script>
    </body>
</html>